import React, {useState, useEffect, PropsWithChildren} from 'react';
import {useDispatch} from 'react-redux';

interface AuthProps {
    onMounted: (dispatch, setIsLoading) => void;
    loading?: any;
}

export function Auth(props: PropsWithChildren<AuthProps>) {
    const dispatch = useDispatch();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        props.onMounted(dispatch, setIsLoading);
    }, [props.onMounted]);

    if (isLoading) {
        return props.loading ? props.loading : <div>Auth Loading...</div>;
    }

    return (
        <>
            {props.children}
        </>
    );
}

